<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
      <span class="cardHeader">{{ apartmentForm.id ? "修改公寓" : "添加公寓" }}</span>
    </template>
    <AreaSelector :disabled="true"></AreaSelector>

    <el-form label-width="120px" style="width: 70%;">
      <el-form-item label="公寓名称">
        <el-input v-model="apartmentForm.name"></el-input>
      </el-form-item>

      <el-form-item label="公寓介绍">
        <el-input type="textarea" v-model="apartmentForm.introduction"></el-input>
      </el-form-item>

      <el-form-item label="所属区域">
      <el-select placeholder="请选择省份" @change="doCityList()" v-model="apartmentForm.provinceId" clearable >
        <el-option v-for="(p,index) in pList"  :key="index"  :label="p.name" :value="p.id" />
      </el-select>
      <el-select placeholder="请选择城市" @change="doDistrictList()" v-model="apartmentForm.cityId" clearable>
              <el-option v-for="(c,index) in cList" :key="index" :label="c.name" :value="c.id" />
          </el-select>
          <el-select placeholder="请选择区域" v-model="apartmentForm.districtId" clearable >
            <el-option v-for="(d,index) in dList" :key="index" :label="d.name" :value="d.id" />
          </el-select>
      </el-form-item>
  

      <el-form-item label="详细地址">
        <el-input placeholder="请输入详细地址" v-model="apartmentForm.addressDetail"></el-input>
      </el-form-item>
      <el-form-item label="公寓前台电话">
        <el-input placeholder="请输入详细地址" v-model="apartmentForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="是否发布">
        <el-radio-group v-model="apartmentForm.isRelease">
          <el-radio :label="0">未发布</el-radio>
          <el-radio :label="1">已发布</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="公寓配套">
        <el-select v-model="apartmentForm.facilityInfoIds" style="width: 100%;" multiple clearable
          placeholder="请选择公寓配套">
          <el-option v-for="(f,index) in fList" :key="f.id" :label="f.name" :value="f.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="公寓标签">
        <el-select v-model="apartmentForm.labelIds" style="width: 100%;" multiple clearable @change=""
          placeholder="请选择公寓标签">
          <el-option  v-for="(l , index) in lList" :key="l.id" :label="l.name" :value="l.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="公寓图片">
        <el-upload v-model:file-list="apartmentForm.graphVoList" action="/admin/file/upload" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess"
          :headers="{access_token:userPinia().token}"
          >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
          <div class="btnGroup">
            <el-button style="width: 150px;" @click="quxiao()" >取消</el-button>
            <el-button style="width: 150px;" @click="saveOrUpdate()" type="primary">确认</el-button>
          </div>
      </el-form-item>
    </el-form>

  </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '', //组件名称
})
</script>
<script lang="ts" setup>
import { ref  , onMounted} from "vue"
import {aparmentListQuery,AptQuery,ApartmentData,apartmentSaveOrUpdate,apartmentDetail} from '@/api/apartmentManagement/index';
import {  type Province,
          type City,
          type District,
          provinceList,
          cityList,
          districtList} from '@/api/region/index'
import {Label,labelList} from '@/api/label/index'          
import {Facility,facilityList} from '@/api/facility/index'
import userPinia from '@/store/modules/user/userStore' 
import {useRouter,useRoute} from 'vue-router'    
import { ElMessage } from 'element-plus'     

//准备当前页面对应的数据
let apartmentForm = ref<ApartmentData>(
  {
      id: '',
      name: '',
      introduction: '',
      districtId: '',
      districtName: '',
      cityId: '',
      cityName: '',
      provinceId: '',
      provinceName: '',
      addressDetail: '',
      phone: '',
      isRelease: '',
      // 	公寓配套id
      facilityInfoIds: [],
      // 	公寓配套信息
      facilityInfoList: [],
      // 	公寓标签id
      labelIds: [],
      // 公寓标签信息
      labelInfoList: [],
      // 图片信息
      graphVoList: []
});


//获取省市区信息
//1.获取省份列表功能
let pList = ref<Province[]>([]);

let doProvinceList = async ()=>{
    let {data} = await provinceList();
    console.log(data);
    pList.value =data;
}

//2.查询城市列表
let cList = ref<City[]>([]);
let doCityList = async ()=>{
    let {data} = await cityList(apartmentForm.value.provinceId as number);
    apartmentForm.value.districtId = "";
    apartmentForm.value.cityId = "";
    console.log(data);
    cList.value =data;
}

let doCityList1 = async ()=>{
    let {data} = await cityList(apartmentForm.value.provinceId as number);
    console.log(data);
    cList.value =data;
}

//3.区列表查询
let dList = ref<District[]>([]);
let doDistrictList = async ()=>{
    let {data} = await districtList(apartmentForm.value.cityId as number);
    apartmentForm.value.districtId = "";
    console.log(data);
    dList.value =data;
}

let doDistrictList1 = async ()=>{
    let {data} = await districtList(apartmentForm.value.cityId as number);
    console.log(data);
    dList.value =data;
}



//查询标签和配套集合
//标签
let lList = ref<Label[]>([])

let doLabelList = async()=>{
  let {data} = await labelList(1);
  lList.value = data;
}

let fList = ref<Facility[]>([]);

let doFacilityList = async ()=>{
  let {data} = await facilityList(1);
  fList.value = data;
}



let route = useRoute();

onMounted(()=>{
  doProvinceList();
  doLabelList();
  doFacilityList();
  //进入以后[[可能]]需要调用id查询
  if(route.query.id){
    doApartmentDetail(route.query.id);
  }
})


//调用详情查询
let doApartmentDetail = async(id:any)=>{
  let {data} = await apartmentDetail(id);
  //回显数据
  apartmentForm.value = data;
  //城市和地区查询
  doCityList1();
  doDistrictList1();
  //标签和配套  返回的是对象,我们想要数组id
  apartmentForm.value.facilityInfoIds =  apartmentForm.value.facilityInfoList.map(item=>{
    return item.id;
  });
  apartmentForm.value.labelIds =  apartmentForm.value.labelInfoList.map(item=>{
    return item.id;
  });
}



let router = useRouter();

//取消
let quxiao = ()=>{
  ElMessage({
        type: 'warning',
        message: '取消保存或者更新!',
      })
  router.push("/apartmentManagement/apartmentManagement/apartmentManagement");
}

//保存或者更新
let saveOrUpdate = async()=>{
  //ref 和 reactive
  let {code} = await apartmentSaveOrUpdate(apartmentForm.value);
  if(code == 200){
    ElMessage({
        type: 'success',
        message: '保存成功!',
      })
    router.push("/apartmentManagement/apartmentManagement/apartmentManagement");
  }
}

</script>

<style lang="scss" scoped></style>